// 全选按钮状态
let stateAll = false

let divEle = document.querySelector('table')

// 获取用户登录的信息
function getUserMessage() {
    let userMessage = JSON.parse(localStorage.getItem('userDataInformation'))
    if (userMessage) {
        let str = `
                    <li><img src="${userMessage[0].headPortrait}" alt=""></li>
                    <li>${userMessage[0].userName}</li>
                `
        $('#headerTop .headerTopUserMessage').html(str)
    } else {
        let str = `
                    <li>未登录</li>
                `
        $('#headerTop .headerTopUserMessage').html(str)
    }
}

// 从localStroge中取商品数据
let proArrPro = JSON.parse(localStorage.getItem('ShoppingCartList'))
showPro(proArrPro)

// 渲染数据到购物车界面
function showPro(pro) {
    let str = `
                <tr>
                    <th hidden>商品id</th>
                    <th><input type="checkbox" class="checkBoxAll" ${stateAll?"checked":""}>全选</th>
                    <th>商品图片</th>
                    <th>商品名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>总价</th>
                    <th>操作</th>
                </tr>
            `
    let shoppingList = pro.map(function (item) {
        return `
                    <tr>
                        <td class="proId" hidden>${item.id}</td>
                        <td><input type="checkbox" class="checkBoxItem" ${item.state?"checked":""}></td>
                        <td><img src="${item.imgUrl}" alt=""></td>
                        <td>${item.name}</td>
                        <td id="money">￥${item.price}</td>
                        <td>
                            <button id="Reduction" ${item.num<=0?"disabled":""}>-</button>
                            <input id="Text" type="text" value="${item.num}">
                            <button id="Add">+</button>
                        </td>
                        <td id="unitPrice">￥${item.singlePrice}</td>
                        <td>
                            <input type="button" value="移入收藏" onclick="collection()"><br>
                            <input id="deleteGoods" type="button" value="删除">
                        </td>
                    </tr>
                `
    }).join('')
    str = str + shoppingList
    $('table').html(str)

    delet()
    selectAll()
}

// 商品数据加减运算
function dynamicData() {
    divEle.addEventListener('click', function (e) {
        e = e || window.event
        var target = e.taret || e.srcElement

        //加法相关的运算
        if (target.id == "Add") {
            let idItem = target.parentElement.parentElement.firstElementChild.innerHTML
            //单个商品数量加一
            let shopsItem = proArrPro.find(function (item) {
                return item.id == idItem
            })
            shopsItem.num++

            //单个商品总价
            shopsItem.singlePrice = (shopsItem.price * shopsItem.num).toFixed(2)

            //所有商品总价
            let unitPriceSum = 0
            for (let i = 0; i < proArrPro.length; i++) {
                unitPriceSum = unitPriceSum + parseFloat(proArrPro[i].singlePrice)
            }
            document.querySelector('#totalPrice>span').innerHTML = `￥${(unitPriceSum).toFixed(2)}`
        }

        //减法相关的运算
        if (target.id == "Reduction") {
            let idItem = target.parentElement.parentElement.firstElementChild.innerHTML
            //单个商品数量减一
            let shopsItem = proArrPro.find(function (item) {
                return item.id == idItem
            })
            shopsItem.num--

            //单个商品总价
            shopsItem.singlePrice = (shopsItem.price * shopsItem.num).toFixed(2)

            //所有商品总价
            let unitPriceSum = 0
            for (let i = 0; i < proArrPro.length; i++) {
                unitPriceSum = unitPriceSum + parseFloat(proArrPro[i].singlePrice)
            }
            document.querySelector('#totalPrice>span').innerHTML = `￥${(unitPriceSum).toFixed(2)}`

        }
        localStorage.setItem('ShoppingCartList', JSON.stringify(proArrPro))
        showPro(proArrPro)
    })
}

/*
 * 删除商品部分
 */
function delet() {
    divEle.addEventListener('click', (e) => {
        e = e || window.event
        var target = e.target || e.which
        if (target.id == 'deleteGoods') {
            var idItem = target.parentElement.parentElement.firstElementChild.innerHTML
            var index = 0
            for (let i = 0; i < proArrPro.length; i++) {
                if (proArrPro[i].id == idItem) {
                    index = i
                }
            }
            proArrPro.splice(index, 1)
            localStorage.setItem('ShoppingCartList', JSON.stringify(proArrPro))
            showPro(proArrPro)
        }
    })
}

/**
 * 商品全选功能
 */
function selectAll() {
    divEle.addEventListener('click', function (e) {
        e = e || window.event
        let target = e.target || e.srcElement
        //全选功能
        if (target.getAttribute("class") == "checkBoxAll") {
            if (stateAll) {
                stateAll = false
                proArrPro.forEach(function (item) {
                    item.state = false
                })
            } else {
                stateAll = true
                proArrPro.forEach(function (item) {
                    item.state = true
                })
            }
        }
        //复选功能
        if (target.getAttribute("class") == "checkBoxItem") {
            var idItem = target.parentElement.previousElementSibling.innerHTML
            var Ele = proArrPro.find(function (item) {
                return item.id == idItem
            })
            Ele.state = !Ele.state
            stateAll = proArrPro.every(item => item.state == true)
        }
        showPro(proArrPro)
    })
}

//各种方法的调用
getUserMessage()
dynamicData()